.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    inset: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 2px;
    background: #8e44ad;
    color: #fff;

}


.egg{
    position: absolute;
    width: 100px;
    height: 130px;
    inset: 0;
    margin: auto;
    background: #fff;
    border-radius: 50px 50px 50px 50px / 80px 80px 50px 50px;
    animation: egg 3s ease-in-out infinite;
    transform-origin: 50% 80%;
}

@keyframes egg {
    0%{
        transform: translate(0, -350px) scale(.8, 1.2);
    }
    25%{
        transform: translate(0, 40px) scale(1.05, .9);
    }
    30%{
        transform: translate(0, -20px) scale(.95, 1.02);
    }
    35%{
        transform: translate(0, 10px) scale(1.01, .98);
    }
    40%,45%{
        transform: translate(0, 0) scale(1) rotate(0);
    }
    50%{
        transform: translate(0, 0) scale(1) rotate(5deg);
    }
    55%{
        transform: translate(0, 0) scale(1) rotate(-5deg);
    }
    60%{
        transform: translate(0, 0) scale(1) rotate(5deg);
    }
    65%,70%{
        transform: translate(0, 0) scale(1) rotate(0);
    }
    75%{
        transform: translate(0, 10px) scale(1.01, .98);
    }
    80%{
        transform: translate(0, -20px) scale(1.02, .95);
    }
    100%{
        transform: translate(0, 350px) scale(.9, 1.1);
    }

}